<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript:核心语法+DOM(针对页面操作)+BOM(针对浏览器)
		 学习主题:针对页面操作比较多---DOM操作
		 JQuery操作DOM:理解:JQ框架改变页面内容效果
		 js基础就可以直接学习,了解函数使用
		   基础函数---时间源之后出现,事件源语法糖中
		   html()   作用:增加一个元素,覆盖原有html
		   val()    作用:针对input元素,实现修改文本框内容
		   text()   作用:生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮,然后,下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque asperiores similique dolorem unde nobis ratione sed itaque nam quas at. Eligendi similique inventore vero iusto ducimus vitae at asperiores repellendus.</p>
		
		<div style="width: 200px; height: 200px; background: black;"></div>
		<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error distinctio incidunt et repellat autem aspernatur voluptate, perspiciatis illum accusantium qui nulla, nam, cumque iste rem dolores explicabo itaque cupiditate odit.</h3>
		<input type="button" value="按钮2" />
		<input type="text" value="输入框可以直接写文本" />
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/* 练习:div 200*200 背景颜色:黑色,鼠标滑过之后,
			下面内容修改:<h3>提示,修改为黄色 */
			
			$("div").mouseenter(function(){
				/* JQ操作DOM--html()函数使用 */
				$("h3").html("<h3>黄颜色</h3>");
			});
			/* 练习:按钮  文本框   点击按钮,文本增加一行文本 */
			$("input[type='button']").click(function(){
				//alert("JQ选择器是否选中");
				$("input[type='text']").val("文本框内容修改")
			});
			/* 利用JQ操作DOM(页面效果): 1.元素内容操作(3个函数)
			                           html()
									   val()
									   text()
			                          2.属性操作(4个函数)
									   <p align="center">
									   attr()
									   removeattr()
									   <input checked>
									   prop()
									   removeprop()
									  3.样式类名操作(5个函数)
									   .drmo{属性：属性值}
									   addClass()
									   removeClass()
									   toggleClass()
									   hasClass()
									  4.元素样式操作(5个函数)
									   css()
									   语法：css("css属性","css属性")
									   width()和height()
									   outerwidth()和outherighe()
									  5.插入和删除操作(7个函数)
									  after()和perpend()
									  afte()和before()
									  remove()和empty()
									  replaceWith()
									  6.元素遍历操作(6个函数)
									  7.JQ动画操作(7个函数)*/
		</script>
	</body>
</html>